<template>
    <div class="app-container">
  
      <el-table
        :key="tableKey"
        v-loading="listLoading"
        :data="list"
        border
        fit
        highlight-current-row
        style="width: 100%;"
      >
        <el-table-column label="原始ID" width="200px" >
          <template slot-scope="{row}">
            <span>{{ row.ToUserName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="微信ID" width="300px" align="center">
          <template slot-scope="{row}">
            <span>{{ row.FromUserName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="事件" align="center" width="150px">
          <template slot-scope="{row}">
            <span class="link-type"><el-button type="success">{{row.MsgType}}</el-button></span>
          </template>
        </el-table-column>
        <el-table-column label="内容" align="center" min-width="300px">
          <template slot-scope="{row}">
            <span class="link-type" v-if="row.MsgType == 'text'">{{row.Content}}</span>
            <el-image v-if="row.MsgType == 'image'" fit="cover" :src="row.PicUrl" :preview-src-list="[row.PicUrl]" style="width:200px" />
            <div v-if="row.MsgType == 'event'">
                <div v-if="row.Event == 'subscribe_msg_popup_event'">
                  <div v-for="item in row.List" :key="item.index" class="moban">
                    <span class="link-type">模板：<el-button size="mini" round>{{TemplateId(item.TemplateId)}}</el-button></span>
                    <span class="link-type moban-btn">
                      <el-button v-if="item.SubscribeStatusString == 'accept'" type="success" size="mini" round>同意</el-button>
                      <el-button v-else type="danger" size="mini" round>拒绝</el-button>
                    </span>
                  </div>
                </div>
                <div v-if="row.Event == 'subscribe_msg_sent_event'">
                  <div  class="moban">
                    <span class="link-type">发送事件：<el-button size="mini" round>{{TemplateId(row.List.TemplateId)}}</el-button></span>
                    <span class="link-type moban-btn">
                      <el-button type="info"  size="mini" round>{{row.List.ErrorStatus}}</el-button>
                    </span>
                  </div>
                </div>
                <div v-if="row.Event == 'user_enter_tempsession'">
                  <div  class="moban">
                    <span >进入客服页面</span>
                  </div>
                </div>
            </div>
          </template>
        </el-table-column>
        
  
        <el-table-column label="操作时间" width="200px" align="center">
          <template slot-scope="{row}">
            <span>{{ row.CreateTime | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
          </template>
        </el-table-column>
  
      </el-table>
  
      <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
  
    </div>
  </template>
  
  <script>
  import { getEvent } from '@/api/event'
  import waves from '@/directive/waves' // waves directive
  import { parseTime ,TemplateId } from '@/utils'
  import Pagination from '@/components/Pagination' // secondary package based on el-pagination
  
  export default {
    name: 'ComplexTable',
    components: { Pagination },
    directives: { waves },
  
    data() {
      return {
        tableKey: 0,
        list: null,
        total: 0,
        listLoading: true,
        listQuery: {
          page: 1,
          limit: 20,
          importance: undefined,
          title: undefined,
          type: undefined,
          sort: '+id'
        },
      }
    },
    created() {
      this.getList()
    },
    methods: {
      TemplateId,
      getList() {
        this.listLoading = true
        getEvent(this.listQuery).then(response => {
          this.list = response.data
          this.total = response.count
          this.listLoading = false
        }).catch(err=>{
          this.listLoading = false
        })
      },
    }
  }
  </script>
  <style scoped>
.moban{
  padding: 5px;
}
.moban-btn{
  padding-left: 5px;
}
  </style>
  